.wrap
{
    width:100%;
    height:520px;
    position: relative;
    &:hover>.btn
    {
        display:inline-block;
    }
    .group
    {
        position:relative;
        height:100%;
        .item
        {
            width:100%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
            opacity:0;
            &:first-child
            {
                opacity:1;
            }
            img
            {
                width:100%;
                height:100%;
            }
        }
        
    }
    .btn
    {
        width:100px;
        height:100px;
        display: inline-block;
        background: rgba(0,0,0,0.5);
        color:#fff;
        font-size:30px;
        position:absolute;
        top:50%;
        margin-top: -50px;
        line-height: 100px;
        text-align:center;
        display:none;
        cursor: pointer;
        z-index: 10;
        &.prev
        {
            left:50px;
        }
        &.next
        {
            right:50px;
        }
    }
    .circle
    {
        width:100%;
        position:absolute;
        left:0;
        bottom:20px;
        z-index: 100;
        text-align:center;
        .circle-item
        {
            display:inline-block;
            width:10px;
            height:10px;
            margin:0 2px;
            border-radius:5px;
            background:#fff;
            cursor:pointer;
            &.active
            {
               width:20px;
               background:#fff;
            }
        }
    }
}